import React from 'react';
import { omit } from 'lodash';

import { nodeToSymbol } from 'html2sketch';
import {
  inlineImageJSON,
  isUpdate,
  outputJSONData,
  pngURLImageJSON,
  render,
  setupTestEnv,
} from '@test-utils';
import { waitForImageLoaded } from 'html2sketch/utils/image';

describe('测试图片', () => {
  it('inline 的图片类型正常', async () => {
    setupTestEnv();
    render(
      <img
        id={'inline'}
        src=""
      />,
    );
    const node = document.getElementById('inline') as HTMLImageElement;
    await waitForImageLoaded(node);
    const image = (await nodeToSymbol(node)).toSketchJSON();

    expect(image).toBeTruthy();

    console.log(image);
    if (isUpdate) {
      outputJSONData(image, 'inline-image');
    }
    expect(omit(image, 'frame')).toEqual(omit(inlineImageJSON, 'frame'));
  }, 30000);

  it('PNG图片链接类型正常', async () => {
    setupTestEnv();
    render(
      <img
        id={'png-url'}
        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        style={{ width: 200, height: 200 }}
      />,
    );
    const node = document.getElementById('png-url') as HTMLDivElement;

    const image = (await nodeToSymbol(node)).toSketchJSON();

    expect(image).toBeTruthy();

    if (isUpdate) {
      outputJSONData(image, 'png-url-image');
    }

    expect(omit(image, 'frame')).toStrictEqual(omit(pngURLImageJSON, 'frame'));
  }, 30000);
});
